<template>
   <div>
        <button @click="show">点击</button>
        <div class="warp"  v-show="flag">
            <p>
                <span>{{text}}</span>
                <button @click="del">取消</button>
            </p>
        </div>
   </div>
</template>

<script>
export default {
    data(){
        return {
            text:"这个是一个弹框",
            flag:false
        }
    },
    methods:{
        show(){
            this.flag = true
        },
        del(){
            this.flag = false
        }
    }
}
</script>

<style scoped>
    button{
        width: 50px;
        height: 50px;
    }
    .warp{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, .5)
    }
    p{
        width: 200px;
        height: 200px;
        background: #fff;
        position: absolute;
        left: 50%;
        margin-left: -50px;
        top: 50%;
        margin-top: -50px;text-align: center;
    }
    p button{
        width: 100px;
        height: 40px;
    }
</style>